<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字媒体技术实验室</title>
    <link rel="stylesheet" href="css/pz.css">
    <link rel="stylesheet" href="css/lty.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/lunbo.css">


</head>
<body>
<!-- body-middle-content -->
<div class="middleContent">
    <div class="middleContainer">
       <div class="logoSearch">
           <div class="contentLogo">
               <a class="logoImage">
                   <span class="logoText">重庆邮电大学数字媒体技术研究所</span>
               </a>
           </div>
           <div class="contentSearch">
               <form action="">
                   <input type="text" class="searchText">
                   <input type="button" class="searchButton">
               </form>
           </div>
       </div>
       <div class="middleNav">
           <ul class="navList">
               <li><a href="">研究所概况</a></li>
               <li><a href="">团队概况</a></li>
               <li><a href="">科研成果</a></li>
               <li><a href="">在线学习</a></li>
               <li><a href="">关于我们</a></li>
           </ul>
       </div>
       <div class="middleBanner">
           <div id="banner">
               <div id="banner_bg"></div>
               <!--标题背景-->
               <div id="banner_info"></div>
               <!--标题-->
               <ul>
                   <li class="on" value="1"></li>
                   <li value="2"></li>
                   <li value="3"></li>

               </ul>
               <div id="banner_list">
                   <a href="#" target="_blank"><img src="img/2.jpg"></a>
                   <a href="#" target="_blank"><img src="img/4.jpg" ></a>
                   <a href="#" target="_blank"><img src="img/2.jpg" ></a>
                   <a href="#" target="_blank"><img src="img/4.jpg"></a>
               </div>
       </div>
    </div>
</div>
</div>



<!-- body-middle-content -->
<!-- banner-bottom -->
<div class="bannerBottom">
    <div class="bannerBottomContainer">
        <div class="bannerBottomLeft">
            <h5>研究所简介</h5>
            <div class="bannerBottomLeftGrids">
                <div class="bannerBottomLeftGrid">
                    <div class="bannerBottomLeftGridLeft">
                        <img src="img/5.jpg" alt="img">
                    </div>
                    <div class="bannerBottomLeftGridRight">
                        <h3><a href="#">XXXXXXXXX</a></h3>
                        <p>
                            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                            XXXXXXXXXXXXXXXX
                            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                            XXXXXXXXXXXXXXXX
                        </p>
                    </div>
                </div>
                <div class="bannerBottomLeftGrid" style="margin-top: 2em">
                    <div class="bannerBottomLeftGridLeft">
                        <img src="img/2.jpg" alt="img">
                    </div>
                    <div class="bannerBottomLeftGridRight">
                        <h3><a href="#">XXXXXXXXX</a></h3>
                        <p>
                            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                            XXXXXXXXXXXXXXXX
                            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                            XXXXXXXXXXXXXXXX
                        </p>
                    </div>
                </div>
            </div>
            <h5>新闻动态</h5>
            <div class="news">
                <div class="newsGrid">
                    <div class="newsGrids">
                        <h3><a href="#">XXXXXXXXXXXXXX</a></h3>
                        <a href="#"><img src="img/2.jpg" alt="img"></a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div class="newsGrids">
                        <h3><a href="#">XXXXXXXXXXXXXX</a></h3>
                        <a href="#"><img src="img/2.jpg" alt="img"></a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div class="newsGrids">
                        <h3><a href="#">XXXXXXXXXXXXXX</a></h3>
                        <a href="#"><img src="img/2.jpg" alt="img"></a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bannerBottomRight">
            <div class="bannerBottomRightGrid1">
                <h5>机构组成</h5>
                <ul>
                    <li><a href="#">XXXXXXXXXX</a></li>
                    <li><a href="#">XXXXXXXXXX</a></li>
                    <li><a href="#">XXXXXXXXXX</a></li>
                    <li><a href="#">XXXXXXXXXX</a></li>
                    <li><a href="#">XXXXXXXXXX</a></li>
                </ul>
            </div>
            <div class="bannerBottomRightGrid2">
                <h5>通知公告</h5>
                <div class="notice1" onmouseover="up()" onmouseout="down()">
                    <img src="img/2.jpg" alt="img">
                    <div class="bannerInfo" id="bannerInfo">
                        <a href="#">Combatant Force</a>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
                    </div>
                </div>
                <div class="notice2">
                    <div class="notice2Img">
                        <img src="img/5.jpg" alt="img">
                    </div>
                    <div class="notice2a">
                        <a href="#">natus error sit voluptatem perspiciatis</a>
                    </div>
                </div>
                <div class="notice2" style="margin-top: 30px">
                    <div class="notice2Img">
                        <img src="img/5.jpg" alt="img">
                    </div>
                    <div class="notice2a">
                        <a href="#">natus error sit voluptatem perspiciatis</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //banner-bottom -->
<!-- footer -->
<div class="footer">
    <div class="footerContainer">
        <div class="footer-grid">
            <img src="img/xin.png" alt="xin">
            <h3><span>Connect</span>Digital media graduate School</h3>
            <form>
                <input type="email" value="enter your email address">
                <input type="submit" value=" " >
            </form>
        </div>
    </div>
</div>
<div class="foot">
    <p></p>
</div>
<!-- //footer -->
    <script src="js/in-out.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/lunbo.js"></script>
</body>
</html>